<template>
  <el-form
    ref="form"
    label-position="top"
    class="user-model-form"
    size="small"
    :model="model"
    :rules="rules"
  >
    <div>
      <div class="font-semibold text-main-title mb-6">成员信息</div>
      <div class="flex">
        <div class="w-1/2">
          <el-form-item label="账户名" prop="account">
            <el-input v-model="model.account" :readonly="isUpdate"></el-input>
          </el-form-item>
        </div>
        <div v-if="!isUpdate" class="w-1/2">
          <el-form-item label="初始密码" prop="password">
            <el-input v-model="model.password"></el-input>
          </el-form-item>
        </div>
      </div>
      <div class="flex">
        <div class="w-1/2">
          <el-form-item label="姓名" prop="accountName">
            <el-input v-model="model.accountName"></el-input>
          </el-form-item>
        </div>
        <div class="w-1/2">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="model.phone" maxlength="11"></el-input>
          </el-form-item>
        </div>
      </div>
      <div class="flex">
        <div class="w-1/2">
          <el-form-item label="部门" prop="org">
            <!-- <el-select v-model="model.org">
              <el-option>销售1</el-option>
              <el-option>销售2</el-option>
            </el-select> -->
            <el-select v-model="model.org" value-key="id" class="w-80" clearable>
              <el-option
                v-for="item in flatDepartments"
                :key="item.id"
                :value="item"
                :label="item.orgName"
              >
                <div
                  :style="{
                    'padding-left': `${(item.level - 2) * 32}px`,
                  }"
                >
                  <i v-if="item.level === 2" class="el-icon-caret-bottom"></i>
                  {{ item.orgName }}
                </div>
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="w-1/2">
          <el-form-item label="职位" prop="position">
            <el-input v-model="model.position"></el-input>
          </el-form-item>
        </div>
      </div>
      <div class="flex">
        <div class="w-1/2">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="model.email"></el-input>
          </el-form-item>
        </div>
        <!-- <div class="w-1/2">
          <el-form-item label="微信" prop="wechat">
            <el-input v-model="model.wechat"></el-input>
          </el-form-item>
        </div> -->
      </div>
    </div>

    <div>
      <div class="font-semibold text-main-title mb-6">部门信息</div>
      <!-- <el-form-item label="直属上级">
        <el-input></el-input>
      </el-form-item> -->
      <el-form-item label="角色" prop="roleIds">
        <el-checkbox-group v-model="model.roleIds">
          <el-checkbox v-for="role in roles" :key="role.id" :label="role.id">{{
            role.roleName
          }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <a @click="addNewRole">+新建角色</a>
    </div>
    <UpsertRoleDialog ref="upsertRole"></UpsertRoleDialog>
  </el-form>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapGetters } from 'vuex'
import UpsertRoleDialog from '@/components/admin/system/role/UpsertRoleDialog.vue'
import { validatePhoneNumber } from '@/utils/validate'
export default Vue.extend({
  components: { UpsertRoleDialog },
  props: {
    model: {
      type: Object,
      default: () => {},
    },
    isUpdate: {
      type: Boolean,
      default: () => {},
    },
  },
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!validatePhoneNumber(value)) {
        callback(new Error('请正确的手机格式'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        account: [
          {
            required: true,
            message: '请输入账户名',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入初始密码',
          },
        ],
        accountName: [
          {
            required: true,
            message: '请输入姓名',
          },
        ],
        phone: [
          {
            required: true,
            message: '请输入手机号',
          },
          {
            validator: validatePhone,
            trigger: 'blur',
          },
        ],
        org: [
          {
            required: true,
            message: '请选择部门',
          },
        ],
        email: [
          {
            required: true,
            message: '请输入邮箱',
          },
          {
            type: 'email',
            message: '请输入正确的邮箱格式',
          },
        ],
        roleIds: [
          {
            required: true,
            message: '请选择角色',
          },
        ],
      },
    }
  },
  computed: {
    ...mapGetters('system', {
      roles: 'roles',
      departments: 'departments',
      flatDepartments: 'flatDepartments',
    }),
    // washedDepartments() {
    //   return this.departments
    // },
  },
  methods: {
    addNewRole() {
      this.$refs.upsertRole?.show()
    },
    validate() {
      return this.$refs.form?.validate()
    },
    resetFields() {
      return this.$refs.form?.resetFields()
    },
  },
})
</script>

<style lang="scss">
.user-model-form {
  .el-input--small {
    width: 320px;
  }
  .el-form-item--small .el-form-item__label {
    line-height: 1.1 !important;
  }
}
</style>
